Discover our collection of images, record memorable moments, and see unique artwork. Each photo tells a private story, inviting you to admire the beauty and creativity. Join us to look back on memories and discover new things through the art lens.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor ( Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Gallery
To add Image block to the Gallery section, click the Add block button (plus icon ➕) under the Gallery.
Once the Image block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Image: Upload an image, recommending 1000 x 1000px .jpg for optimal quality
Link (Optional): Add links to access the website or related information from photos
Open this link in a new window: When enabled, the button link to open in a new browser tab
Once you add the Gallery section, you can customize its settings in the left or right sidebar (depending on your screen size)
2.2.1. General
Make section full width: Expands section width to the full page width, optimizing display on large screens and creating an impactful layout.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Image ratio: Adjust the aspect ratio of collection images, ensuring images display beautifully and propotionally (Adapt to image, Square, ASOS, Portrait, Lanscape, Custom)
Number of images on desktop (Automatically optimized for mobile): Define the number of image columns displayed on desktop screens, adjusting the image display layout.
Corner radius images: Adjusts the corner radius of images, creating a soft or sharp interface depending on the website design.
Spacing between images: Adjusts the spacing between images on desktop screens, controlling the layout and creating content clarity.
Spacing between images (mobile): Adjusts the spacing between images on mobile phone screens, optimizing display for small screens.
Action after when clicked image: Select the option (Go to link, Open modal) after clicking the image
Auto scroll (Auto-scroll activates only when there are more images than can be displayed on screen): Browse smooth photos without manual operation when the number of photos exceeds the limit
Show icon (Show the icon if an image link is entered): The visual icon indicates that the image can lead to another website when clicking
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
2.2.2. Theme Settings
In the Gallery > click open Theme Settings tab
Page width: Defines the maximum width of the page content, controlling layout and ensuring optimal display across devices
2.2.3. Custom CSS
In the Gallery > click open Custom CSS tab
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to Theme Settings.
Choose a heading that aligns with your brand’s tone and message to build trust and engagement.
Clicking on the Section header title under Gallery section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Use custom maximum width: Allows you to set a custom maximum width for the section content
Maximum width: Defines the maximum width of the section content, ensuring content displays proportionally and doesn't stretch excessively on large screens.
Alignment: Adjusts the alignment of content within the section (left, right, center), controlling the layout and creating visual balance.
To add Heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
Heading tag (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.
To add Sub heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Sub heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Text block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content you want to display, allowing customization of the message and information conveyed.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design
Size: Adjust the font size of the text, ensuring readability and compatibility with the website layout (eg: Small, Medium, Large,...)
Hide on mobile: Hides or shows the text on mobile devices, optimizing the user experience on different screen sizes.
To add Caption block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.
Once the Caption block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users.
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Spacer block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.
Once the Spacer block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Space: Setting space between elements creates clear separation.
Tablet space: Optimizes the spacing between elements on tablet screens, ensuring content is displayed balanced and easy to interact with on medium-sized screen devices.
Mobile space: Adjusts the spacing between elements on mobile phone screens, optimizing the user experience on small screens
To add Icon block to the Section heading, click the Add item button (plus icon ➕) under the Section heading.
Once the Icon block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Icon height: Adjust the icon height on desktop screens, controlling the display size.
Tablet icon height: Adjust the icon height on tablet screens, optimizing display for this device.
Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
How to get an SVG icon?
Step 1: Click the link Get a svg remixicon or tabler icons under Custom SVG icon option
Step 2: Search icon you want > Click the icon > click Copy SVG button
Step 3: Go back to theme customize and paste SVG icon into the field