Welcome to WebSensePro! In this tutorial video, I’ll guide you through the process of displaying specific sections in different languages on your Shopify store. Whether it’s an image with Spanish text or English text, you’ll learn how to show each section based on the language selected.
Step 1: Understand the Objective
The goal here is to show certain sections of your website only when visitors are browsing in a particular language. For instance, if your site supports both English and Spanish, you might want to display language-specific content to enhance user experience.
Step 2: Preparation
Before diving into code, ensure you have access to your Shopify store’s backend and a basic understanding of HTML, CSS, and Liquid.
Step 3: Theme Setup
If you haven’t already, install a theme that supports customization. For this demonstration, we’ll be using the Dawn theme.
Step 4: Adding Language-Specific Sections
Navigate to your theme’s customization settings and add the desired sections to your homepage. For each section, upload images corresponding to the different languages you support.
Step 5: Identifying Section IDs
Using your browser’s developer tools, inspect the elements of the sections you want to make language-specific. Note down their unique section IDs.
Step 6: Editing the Code
Access your theme’s code editor and locate the “theme.liquid” file. Here, we’ll add conditional statements to control the visibility of sections based on language.
Step 7: Conditional Statements for English
Inside the “theme.liquid” file, insert an if condition to hide the Spanish version of the section when the language is set to English. Utilize the section ID and CSS to hide the unwanted content.
Step 8: Conditional Statements for Spanish
Similarly, add another if condition to hide the English version of the section when the language is set to Spanish. Again, use the section ID and CSS to achieve this.
Step 9: Testing
Save your changes and preview your store. Test the functionality by switching between language options. Ensure that only the relevant sections are displayed based on the chosen language.
